<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/ui.css" rel="stylesheet">
    <link rel="stylesheet" href="css/control.css">
    <style>
        #body {
            width: 100%;
            max-height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .articleImg {
            /* width: 100%; */
            /* height: auto !important; */
            max-width: 100px;
        }

        th,
        td {
            text-align: center;
        }
        .diy-opt-group-self{
            margin-top: 0;
            overflow: hidden;
        }
    </style>
</head>

<body class="gray-bg animated fadeInRight">
    <div id="body">
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">

                        <div  class=" diy-opt-group-self">
                            <div class="row diy-search">
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="searchName" placeholder="请输入姓名或登录名">
                                    </div>
                                </div>
                                <div class="col-sm-1">
                                    <button class="btn btn-success btn-sm" title="搜索" id="search">搜索</button>
                                </div>
                                <div class="fr">
                                    <a href="usermanageAdd.html" class="btn btn-info btn-sm" title="添加用户">添加用户</a>
                                </div>
                            </div>
                        </div>

                        <div class="ibox-content">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th width="10%">登录名</th>
                                        <th width="10%">姓名</th>
                                        <th width="10%">app角色</th>
                                        <th width="10%">pc角色</th>
                                        <th width="14%">最近登录</th>
                                        <th width="14%">注册时间</th>
                                        <th width="10%">用户状态</th>
                                        <th width="12%">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="list">
                                </tbody>
                            </table>
                        </div>
                        <div id="pageRow" class="fixBottom">
                            <div class="fr" id="page">
                                <ul class="pagination" style="margin:0;float:right;">
                                    <li class="paginate_button" id="firstPage">
                                        <a href="javascript:">
                                            <<</a>
                                    </li>
                                    <li class="paginate_button" id="previousPage">
                                        <a href="javascript:">
                                            <</a>
                                    </li>
                                    <li class="paginate_button">
                                        <a href="javascript:" style="padding:0">
                                            <select class="" name="" style="padding:4px 10px" id="pageInfo">
                                            </select>
                                        </a>
                                    </li>
                                    <li class="paginate_button" id="nextPage">
                                        <a href="javascript:">></a>
                                    </li>
                                    <li class="paginate_button" id="lastPage">
                                        <a href="javascript:">>></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="fr" style="margin-right:20px;">
                                <div class="dataTables_info" style="line-height:28px;">当前显示第
                                    <span id="startRow"></span> 到
                                    <span id="endRow"></span> 项，共
                                    <span id="totalPage"></span> 项 ,每页显示
                                    <select class="" name="" id="pageSizeInfo" style="margin:0 10px;">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                        <option value="50">50</option>
                                    </select>项</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/work/common.js"></script>
    <script src="js/plugins/laydate/laydate.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>
    <script src="js/plugins/layer/layer.js"></script>
    <!-- 自定义js -->
    <script src="js/content.js"></script>
    <script>
        var pageNum = getStorage("pageNum") || 1;
        var pageSize = getStorage("pageSize") || 20;
        var flag = 0;

        var searchUserName = "";
        $(document).ready(function () {
            $("#pageSizeInfo").val(pageSize);
            initUserList();

            // 搜索
            $("#search").on("click", function () {
                searchUserName = $("#searchName").val();
                initUserList();
            });



            $("#trans").click(function () {
                $("#conditions").slideToggle();
            });



            $("#pageSizeInfo").change(function () {
                $("#pageSizeInfo").blur()
                if (flag == 1) {
                    return
                };
                flag = 1
                pageSize = this.options[this.options.selectedIndex].value;
                setStorage("pageSize", pageSize)
                initUserList()
            });


        });


        function initUserList() {
            ajax({
                url: "userm/getAccountList",
                type: "GET",
                dataType: 'jsonp',
                jsonp: "callback",
                async: true,
                data: {
                    userName:searchUserName,
                    pageNo:pageNum,
                    pageSize:pageSize
                },
                timeout: 8000,
                error: function (xhr, type) {
                    layer.msg("服务器异常，请稍后重试！", {time:2000})
                },
                successx: function (data) {
                    flag = 0;
                    if (data.success == true) {
                        creatList(data.data.list);
                        createPageInfo(data.data);
                    } else {
                        layer.msg(data.message,{time:1000})
                    }
                },
            });
        }

        function creatList(data) {
            var tpl = '';
            for (var i = 0; i < data.length; i++) {
                tpl += '<tr class="viewDb" data-val="' + data[i].userId + '">' +
                    '<td>' + data[i].userName + '</td>' +
                    '<td>' + data[i].realName + '</td>' +
                    '<td>' + attemptStr(data[i].appRoleName) + '</td>' +
                    '<td>' + attemptStr(data[i].pcRoleName)  + '</td>' +
                    '<td>' + timeStamp2String(data[i].lastLoginTime,"ymdhms") + '</td>' +
                    '<td>' + timeStamp2String(data[i].createTime, "ymdhms")  + '</td>' +
                    '<td>' + showAccountStatus(data[i].accountStatus)  + '</td>' +
                    '<td>' +
                    '<a class="checkInfo btn btn-warning btn-xs">详情编辑</a>&nbsp;&nbsp;' +
                    '<a class="changeRole btn btn-danger btn-xs">修改角色</a>' +
                    '</td>' +
                    '</tr>'
            }
            $("#list").empty().append(tpl);


            // 用户详情
            $('.checkInfo').click(function () {
                var id = $(this).parent().parent().attr("data-val");
                setStorage("userId", id);
                window.location.href = "usermanageDetail.html";
                // layer.open({
                //     type: 2,
                //     title: '重置密码',
                //     maxmin: true,
                //     shadeClose: false, //点击遮罩关闭层
                //     closeBtn: 1,
                //     maxmin: false,
                //     area: ['500px', '400px'],
                //     content: 'resetPassword.html'
                // });
            });

            /**
             * 修改角色弹框
             */
            $(".changeRole").click(function () {
                var id = $(this).parent().parent().attr("data-val");
                setStorage("userId", id);
                layer.open({
                    type: 2,
                    title: '更改角色',
                    maxmin: true,
                    shadeClose: false, //点击遮罩关闭层
                    closeBtn: 1,
                    maxmin: false,
                    area: ['440px', '330px'], // 长，高
                    content: 'changeRole.html'
                });
            });
        }

        function attemptStr(str) {
            if (isNULL(str))
                return "";
            return str;
        }

        function showAccountStatus(status) {
            if (status == 0) {
                return "正常";
            } else if (status == 1) {
                return "禁用";
            }
        }

        //创建页码信息
        function createPageInfo(data) {
            $("#startRow").text(data.startRow)
            $("#endRow").text(data.endRow)
            $("#totalPage").text(data.total)
            var temp = '';
            for (var i = 1; i < data.pages + 1; i++) {
                temp += '<option value="' + i + '">' + i + '</option>'
            }
            $("#pageInfo").html(temp);
            $("#pageInfo").val(data.pageNum);
            $("#pageInfo").change(function () {
                $("#pageInfor").blur();
                if (flag == 1) {
                    return
                };
                flag = 1
                pageNum = this.options[this.options.selectedIndex].value
                setStorage("pageNum", pageNum)
                getData()
            });
            $("#firstPage").click(function () {
                if (pageNum != 1) {
                    if (flag == 1) {
                        return
                    };
                    flag = 1
                    pageNum = 1
                    setStorage("pageNum", pageNum)
                    getData()
                }
            });
            $("#lastPage").click(function () {
                if (pageNum < data.pages) {
                    if (flag == 1) {
                        return
                    };
                    flag = 1
                    pageNum = data.pages
                    setStorage("pageNum", pageNum)
                    getData()
                }
            });
            $("#nextPage").click(function () {
                if (pageNum < data.pages) {
                    if (flag == 1) {
                        return
                    };
                    flag = 1
                    pageNum++
                    setStorage("pageNum", pageNum)
                    getData()
                }
            });
            $("#previousPage").click(function () {
                if (pageNum > 1) {
                    if (flag == 1) {
                        return
                    };
                    flag = 1
                    pageNum--
                    setStorage("pageNum", pageNum)
                    getData()
                }
            })
        }
    </script>
</body>

</html>